<style lang="less" scoped>
    @import './UserAttribute.less';
</style>
    <template>
        <div ref="filterItemArea" >
            <Button  v-on:click="addFirst" icon="ios-add" >添加</Button>
            <div v-if="createdConfig.config.user_rule.rules.length > 0" ref="userattr" :class="createdConfig.config.user_rule.rules.length> 1? 'filter-area1' : 'filter-area'">
                <div class="condition" v-if="createdConfig.config.user_rule.rules.length > 1" >
                    <Button class="condition-button" v-on:click="switchConditon()">{{AndOr === 'and' ? '且' : '或'}}</Button>
                </div>
                <div v-for="(item,index) in createdConfig.config.user_rule.rules">
                    <div v-if="item.rules" >
                        <UserAttributetemtwo :subscript ='index' :sublength = 'createdConfig.config.user_rule.rules.length-1'   :createdConfig = "createdConfig" :userAttribute = "userAttribute" class="mg"></UserAttributetemtwo>
                    </div>
                    <UserAttributetem  v-if="!item.rules" :subscript ='index' :sublength = 'firstLength'   :createdConfig = "createdConfig" :userAttribute = "userAttribute" class="mg"></UserAttributetem>
                </div>
            </div>
        </div>
    </template>
<script>

import UserAttributetem from './first_layer/first_layer';
import UserAttributetemtwo from './second_layer/second_layer';

export default {
    data() {
        return {
            Attribute:'',
            condition:'',
            AttributeValueList:[],
            AttributeValue:''
        }
    },
    props:['createdConfig','userAttribute'],
    computed:{
        AndOr(){
            return this.createdConfig.config.user_rule.condition;
        },
        /**
         * 计算第一层元素最后一个可以添加元素
         */
        firstLength(){
            let firstlen = this.createdConfig.config.user_rule.rules;
            let retnum = [];
            for(var i= 0;i<this.createdConfig.config.user_rule.rules.length;i++){
                if(!(firstlen[i].rules)){
                    retnum.push(i)
                }
            }
            retnum.sort(function(a,b){
                return a-b;
            });
            ;
            return retnum[retnum.length - 1];
        },
        /**
         * 计算第二层元素最后一个可以添加元素
         */
        secondtLength(){
            let firstlen = this.createdConfig.config.user_rule.rules;
            let retnum = [];
            for(var i= 0;i<this.createdConfig.config.user_rule.rules.length;i++){
                if(firstlen[i].rules){
                    retnum.push(i)
                }
            }
            retnum.sort(function(a,b){
                return a-b;
            });
            return retnum[retnum.length - 1]
        }
    },
    methods: {
        /**
         * 切换且与或
         */
        switchConditon(){
            this.AndOr === 'and' ? this.createdConfig.config.user_rule.condition = 'or' : this.createdConfig.config.user_rule.condition = 'and';
        },
        addFirst(){
            this.createdConfig.config.user_rule.rules.push({
                "property": "user.country",
                "operator": "equal",
                "values": [
                    "中国",
                    "美国"
                ]
            })
        },
        /**
         * 删除第一层元素
         */
        delFirst(subindex){
            if(this.createdConfig.config.user_rule.rules.length > 1){
                this.createdConfig.config.user_rule.rules.splice(subindex,1)
            }
        },
         /**
         * 变成自己同时存在两个
         */
        chnageSon(subscript){
            let subcon = this.createdConfig.config.user_rule.rules[subscript];
            this.createdConfig.config.user_rule.rules.splice(subscript,1,{
                "condition":"and",
                "rules":[
                    subcon,
                    subcon
                ]
            })
        },
        /**
         * 变成第一层级
         */
        chnageParent(subscript){
            let subcon = this.createdConfig.config.user_rule.rules[subscript].rules[0];
            this.createdConfig.config.user_rule.rules.splice(subscript,1,subcon)
        }
    },
    components: {
        UserAttributetem,
        UserAttributetemtwo
    }
}

</script>

